<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <title>Connect with Steam</title>
</head>

<body>
    <div class="container">
        <div class="content">
            <header class="main-header">
                <div class="main-header__container">
                    <img class="steam-logo-icon" src="img/icon-steam-logo.svg" alt="Steam logo">
                    <div class="main-header__title">
                        <h1 class="title">Connect with Steam</h1>
                        <p class="subtitle">To an existing Steam account</p>
                    </div>
                </div>
                <div class="main-header__container padlock-icon-container">
                    <svg class="padlock-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15">
                        <g fill-rule="evenodd">
                            <path d="M7.5 0c2 0 3.5 1.6 3.5 3.5V5h1a2 2 0 012 2v6a2 2 0 01-2 2H3a2 2 0 01-2-2V7c0-1.1.9-2 2-2h1V3.5C4 1.5 5.6 0 7.5 0zm0 8c-.2 0-.4.2-.5.4v3.1a.5.5 0 001 0v-3c0-.3-.2-.5-.5-.5zm0-7C6.2 1 5.1 2 5 3.3V5h5V3.5C10 2.2 9 1.1 7.7 1h-.2z"/>
                        </g>
                    </svg>
                    <span class="tooltip">GOG Galaxy does not hold your data. Your login and password will be sent as encrypted data to Steam servers.</span>
                </div>
            </header>
            <section class="main-content">
                <form id="main-form" class="main-form" action="/" method="GET">
                    <fieldset id="loginFieldset" style="display: none;">
                        <legend>Login with your Steam account below to access your Steam games and friends from GOG Galaxy.</legend>
                        <div class="field-group">
                            <label for="step-1-username">Steam username</label>
                            <input class="basic-input login-input" type="text" id="step-1-username" name="username" disabled="disabled">
                        </div>
                        <div class="field-group">
                            <label for="step-1-password">Password</label>
                            <input class="basic-input login-input" type="password" id="step-1-password" name="password" disabled="disabled">
                        </div>
                    </fieldset>
                    <fieldset id="loginErrorFieldset" style="display: none;">
                        <legend>Login with your Steam account below to access your Steam games and friends from GOG Galaxy.</legend>
                        <div class="field-group">
                            <label for="step-2-username">Steam username</label>
                            <input class="basic-input login-input errored" type="text" id="step-2-username" name="username" disabled="disabled">
                        </div>
                        <div class="field-group relative">
                            <label for="step-2-password-errored">Password</label>
                            <input class="basic-input login-input errored" type="password" id="step-2-password-errored" name="password" disabled="disabled">
                            <div class="show-password"></div>
                        </div>
                        <p class="error-message">
                            <img src="img/icon-error.svg" alt="" class="error-icon"> You have entered your password or account name incorrectly. Please check your password and account name and try again.
                        </p>
                    </fieldset>
                    <fieldset id="steamGuardFieldset" style="display: none;">
                        <legend>Enter a special access code (Steam Guard) that was sent to your email address from Steam Support.</legend>
                        <div class="field-group field-group--no-justify">
                            <label for="step-1-code">Steam Guard code</label>
                            <input class="basic-input steam-guard-input" type="text" id="step-1-code" name="code" disabled="disabled">
                        </div>
                        <p class="resend-code">Haven’t received the email from Steam Support?
                            <a href="/two_factor_mail_finished?resend=True" class="resend-button">Resend it.</a>
                        </p>
                    </fieldset>
                    <fieldset id="steamGuardErrorFieldset" style="display: none;">
                        <legend>Enter a special access code (Steam Guard) that was sent to your email address from Steam Support.</legend>
                        <div class="field-group field-group--no-justify">
                            <label for="step-2-code">Steam Guard code</label>
                            <input class="basic-input steam-guard-input errored" type="text" id="step-2-code" name="code" disabled="disabled">
                        </div>
                        <p class="resend-code">Haven’t received the email from Steam Support?
                            <a href="/two_factor_mail_finished?resend=True" class="resend-button">Resend it.</a>
                        </p>
                        <p class="error-message error-message--centered">
                            <img src="img/icon-error.svg" alt="" class="error-icon"> Invalid code
                        </p>
                    </fieldset>
                    <fieldset id="steamAuthenticatorFieldset" style="display: none;">
                        <legend>As an additional security measure, you’ll need to enter the current Steam Guard code from the Steam
                            Mobile Authenticator on your phone.</legend>
                        <div class="field-group field-group--no-justify">
                            <label for="step-3-code">Steam Guard code</label>
                            <input class="basic-input steam-guard-input" type="text" id="step-3-code" name="code" disabled="disabled">
                        </div>
                    </fieldset>
                    <fieldset id="steamAuthenticatorErrorFieldset" style="display: none;">
                        <legend>As an additional security measure, you’ll need to enter the current Steam Guard code from the Steam
                            Mobile Authenticator on your phone.</legend>
                        <div class="field-group field-group--no-justify">
                            <label for="step-4-code">Steam Guard code</label>
                            <input class="basic-input steam-guard-input errored" type="text" id="step-4-code" name="code" disabled="disabled">
                        </div>
                        <p class="error-message error-message--centered">
                            <img src="img/icon-error.svg" alt="" class="error-icon"> Invalid code
                        </p>
                    </fieldset>
                </form>
            </section>
            <footer class="main-footer">
                <div class="main-footer__container">
                    <a class="forgot-password" href="https://help.steampowered.com/en/wizard/HelpWithLogin" target="_blank">Forgot your password?</a>
                </div>
                <div class="main-footer__container">
                    <button class="basic-button main-footer__button main-footer__button--primary" type="submit" form="main-form">Continue</button>
                </div>
            </footer>
        </div>
    </div>
    <script>
        // Toggling password visibility

        const toggleButton = document.querySelector(".show-password");
        const input = document.getElementById("step-2-password-errored");
        function togglePasswordVisibility() {
            if (input.type === "password") {
                input.type = "text";
            } else {
                input.type = "password"
            }
        }
        toggleButton.addEventListener("click", togglePasswordVisibility);

        // Handling urlParams, form actions and enabling inputs

        const urlParamsObj = {
            login: "?view=login",
            loginErrored: "?view=login?errored=true",
            steamGuard: "?view=steamguard",
            steamGuardResendCode: "?view=steamguard?resend=true",
            steamGuardErrored: "?view=steamguard?errored=true",
            steamGuardErroredResendCode: "?view=steamguard?errored=true?resend=true",
            steamAuthenticator: "?view=steamauthenticator",
            steamAuthenticatorErrored: "?view=steamauthenticator?errored=true"
        };

        const fieldSetsObj = {

            loginFieldSet: document.querySelector("#loginFieldset"),
            loginInputs: document.querySelectorAll("#loginFieldset input"),

            loginErrorFieldset: document.querySelector("#loginErrorFieldset"),
            loginErroredInputs: document.querySelectorAll("#loginErrorFieldset input"),

            steamGuardFieldSet: document.querySelector("#steamGuardFieldset"),
            steamGuardInputs: document.querySelectorAll("#steamGuardFieldset input"),

            steamGuardErrorFieldset: document.querySelector("#steamGuardErrorFieldset"),
            steamGuardErrorInputs: document.querySelectorAll("#steamGuardErrorFieldset input"),

            steamAuthenticatorFieldset: document.querySelector("#steamAuthenticatorFieldset"),
            steamAuthenticatorInputs: document.querySelectorAll("#steamAuthenticatorFieldset input"),

            steamAuthenticatorErrorFieldset: document.querySelector("#steamAuthenticatorErrorFieldset"),
            steamAuthenticatorErrorInputs: document.querySelectorAll("#steamAuthenticatorErrorFieldset input")

        }

        function handleEnablingInputs(inputs) {
            for (let i = 0; i < inputs.length; i++) {
                inputs[i].disabled = false;   
            }
        }

        function handleParamsAndFormAction() {
            const url = window.location.search;
            const formElement = document.querySelector("#main-form");
            const forgotPasswordButtonElement = document.querySelector(".forgot-password");

            switch (url) {
                case urlParamsObj.login:
                    fieldSetsObj.loginFieldSet.style.display = "block";
                    handleEnablingInputs(fieldSetsObj.loginInputs);
                    forgotPasswordButtonElement.style.display = "block";
                    formElement.action = "/login_finished";
                    break;
                case urlParamsObj.loginErrored:
                    fieldSetsObj.loginErrorFieldset.style.display = "block";
                    handleEnablingInputs(fieldSetsObj.loginErroredInputs);
                    forgotPasswordButtonElement.style.display = "block";
                    formElement.action = "/login_finished";
                    break;
                case urlParamsObj.steamGuard:
                    fieldSetsObj.steamGuardFieldSet.style.display = "block";
                    handleEnablingInputs(fieldSetsObj.steamGuardInputs);
                    formElement.action = "/two_factor_mail_finished";
                    break;
                case urlParamsObj.steamGuardErrored:
                    fieldSetsObj.steamGuardErrorFieldset.style.display = "block";
                    handleEnablingInputs(fieldSetsObj.steamGuardErrorInputs);
                    formElement.action = "/two_factor_mail_finished";
                    break;
                case urlParamsObj.steamGuardResendCode:
                    fieldSetsObj.steamGuardFieldSet.style.display = "block";
                    handleEnablingInputs(fieldSetsObj.steamGuardInputs);
                    formElement.action = "/two_factor_mail_finished";
                    break;
                case urlParamsObj.steamGuardErroredResendCode:
                    fieldSetsObj.steamGuardErrorFieldset.style.display = "block";
                    handleEnablingInputs(fieldSetsObj.steamGuardErrorInputs);
                    formElement.action = "/two_factor_mail_finished";
                    break;
                case urlParamsObj.steamAuthenticator:
                    fieldSetsObj.steamAuthenticatorFieldset.style.display = "block";
                    handleEnablingInputs(fieldSetsObj.steamAuthenticatorInputs);
                    formElement.action = "/two_factor_mobile_finished";
                    break;
                case urlParamsObj.steamAuthenticatorErrored:
                    fieldSetsObj.steamAuthenticatorErrorFieldset.style.display = "block";
                    handleEnablingInputs(fieldSetsObj.steamAuthenticatorErrorInputs);
                    formElement.action = "/two_factor_mobile_finished";
                    break;
                default: 
                    fieldSetsObj.loginFieldSet.style.display = "block";
                    handleEnablingInputs(fieldSetsObj.loginInputs);
                    forgotPasswordButtonElement.style.display = "block";
                    formElement.action = "/login_finished";
            }
        }
        window.addEventListener("load", handleParamsAndFormAction);
    </script>
</body>

</html>
